<template>
  <f-page-layout title="护理记录表单" :actions="actions">
    <f-nursing-records style="height: 100%" v-bind="apis" ref="tableRef" :config="config">
      <template #header>
        <div style="position: relative; border: 1px solid #ececec; border-bottom: 0">
          <h1
            class="text-center font-500 p0 m0 text-14"
            style="padding-top: 0.5cm; color: var(--fok-color-gray-10)">
            西藏阜康儿童医院
          </h1>
          <h2 class="text-center font-500 p0 m0 text-14" style="color: var(--fok-color-gray-10)">
            一般护理记录
          </h2>
          <div>
            <img
              style="height: 50px; position: absolute; right: 15px; top: 0.5cm"
              src="http://172.16.88.7:81/his-main/assets/logo-lt-3db7e9bd.1744253755129.png" />
            <div
              style="
                display: flex;
                justify-content: space-between;
                padding: 8px 15px;
                font-size: 12px;
              ">
              <div>姓名:李四</div>
              <div>科室:住院1楼</div>
              <div>床号:1001</div>
              <div>诊断:感冒流鼻涕</div>
              <div>时间:2023-11-11</div>
              <div>住院号：1110012</div>
            </div>
          </div>
        </div>
      </template>
    </f-nursing-records>
  </f-page-layout>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { xml2json } from 'fok-js';
import { reactive, ref } from 'vue';
import { printNursingTable as printTable } from '../../packages';
const tableRef = ref();
const xmlData = ref({
  config: {
    topForm: [],
    columns: []
  }
});
const actions = [
  {
    label: '新增护理记录',
    type: 'primary',
    icon: 'el-icon-document-copy',
    click: () => {
      tableRef.value.add();
    }
  },
  {
    label: '打印',
    type: 'primary',
    icon: 'el-icon-document-copy',
    click: () => {
      printTable({
        columns: config.config.columns,
        data: remoteData,
        title: '护理记录',
        mainTitle: '西藏阜康医院'
      });
    }
  }
];
// 约定的数据格式,提交和返回都使用该格式进行解析
let remoteData: any[] = new Array(30).fill(null).map((item, i) => ({
  isMerge: false,
  info: null,
  values: {
    '120250300000952': {
      type: '3',
      text: null,
      dict: null,
      list: [],
      object: null
    },
    '120250300000940': {
      type: '1',
      text: '12',
      dict: null,
      list: null,
      object: null
    },
    '120250300000961': {
      type: '4',
      text: null,
      dict: null,
      list: null,
      object: {
        '120250300000960': {
          type: '2',
          text: null,
          dict: {
            code: '02',
            desc: '肛温'
          },
          list: null,
          object: null
        },
        '120250300000954': {
          type: '1',
          text: '12',
          dict: null,
          list: null,
          object: null
        },
        '120250300000959': {
          type: '2',
          text: null,
          dict: {
            code: '02',
            desc: '药物降温'
          },
          list: null,
          object: null
        },
        '120250300000958': {
          type: '1',
          text: '12213123',
          dict: null,
          list: null,
          object: null
        }
      }
    },
    '120250300000950': {
      type: '4',
      text: null,
      dict: null,
      list: null,
      object: {
        '120250300000941': {
          type: '1',
          text: '12',
          dict: null,
          list: null,
          object: null
        },
        '120250300000942': {
          type: '1',
          text: '12',
          dict: null,
          list: null,
          object: null
        }
      }
    },
    '120250300000943': {
      type: '1',
      text: '12',
      dict: null,
      list: null,
      object: null
    },
    '120250300000953': {
      type: '3',
      text: null,
      dict: null,
      list: [],
      object: null
    },
    '120250300000938': {
      type: '2',
      text: null,
      dict: {
        code: '08',
        desc: '麻醉未醒'
      },
      list: null,
      object: null
    },
    '120250300000949': {
      type: '1',
      text: '',
      dict: null,
      list: null,
      object: null
    },
    '120250300000957': {
      type: '4',
      text: null,
      dict: null,
      list: null,
      object: {
        '120250300000956': {
          type: '1',
          text: '的说法',
          dict: null,
          list: null,
          object: null
        },
        '120250300000955': {
          type: '1',
          text: '但是发生',
          dict: null,
          list: null,
          object: null
        }
      }
    },
    '120250300000939': {
      type: '1',
      text: '12',
      dict: null,
      list: null,
      object: null
    }
  },
  collectDatetime: '2025-04-02 09:28:07',
  signs: null
}));
const xmlStr = `<application xmlns="http://www.w3.org/1999/xhtml">
  <type type="string">table</type>
  <config type="object">
    <top-form type="array"></top-form>
    <columns type="array">
      <array-item type="object">
        <title type="string">记录日期</title>
        <field type="string">collectDatetime</field>
        <edit-type type="string">date</edit-type>
        <min-width type="number">150</min-width>
        <props type="object">
          <format type="string">YYYY-MM-DD HH:mm</format>
          <value-format type="string">YYYY-MM-DD HH:mm</value-format>
          <show-time type="boolean">true</show-time>
        </props>
      </array-item>
      <array-item type="object">
        <title type="string">意识</title>
        <field type="string">120250300000938</field>
        <edit-type type="string">dictionary</edit-type>
        <min-width type="number">120</min-width>
        <props type="object">
          <code type="string">EAC_YS</code>
        </props>
      </array-item>
      <array-item type="">
        <title type="string">氧疗(L/min)</title>
        <field type="string">120250300000957</field>
        <data-type type="string">column-object</data-type>
        <children type="array">
          <array-item type="object">
            <title type="string">鼻导管</title>
            <field type="string">120250300000955</field>
            <edit-type type="string">input</edit-type>
            <min-width type="number">150</min-width>
          </array-item>
          <array-item type="object">
            <title type="string">面罩</title>
            <field type="string">120250300000956</field>
            <edit-type type="string">input</edit-type>
            <min-width type="number">150</min-width>
          </array-item>
        </children>
      </array-item>

      <array-item type="object">
        <title type="string">呼吸（次/min）</title>
        <field type="string">120250300000940</field>
        <edit-type type="string">input</edit-type>
        <min-width type="number">150</min-width>
      </array-item>
      <array-item type="object">
        <title type="string">心率（次/min）</title>
        <field type="string">120250300000939</field>
        <edit-type type="string">input</edit-type>
        <min-width type="number">120</min-width>
      </array-item>
      <array-item type="object">
        <title type="string">血压(mmHg)</title>
        <children type="array">
          <array-item type="object">
            <title type="string">收缩压/舒张压</title>
            <field type="string">120250300000950</field>
            <align type="string">center</align>
            <edit-type type="string">dy-inputs</edit-type>
            <data-type type="string">object</data-type>
            <min-width type="number">150</min-width>
            <props type="object">
              <fields type="array">
                <array-item type="object">
                  <field type="string">120250300000941</field>
                  <edit-type type="string">input</edit-type>
                </array-item>
                <array-item type="object">
                  <field type="string">120250300000942</field>
                  <edit-type type="string">input</edit-type>
                </array-item>
              </fields>
            </props>
          </array-item>
        </children>
      </array-item>
      <array-item type="object">
        <title type="string">血氧饱和度(%)</title>
        <field type="string">120250300000943</field>
        <edit-type type="string">input</edit-type>
        <min-width type="number">120</min-width>
      </array-item>
      <array-item type="object">
        <title type="string">体温</title>
        <field type="string">120250300000961</field>
        <data-type type="string">column-object</data-type>
        <children type="array">
          <array-item type="object">
            <title type="string">数值℃</title>
            <field type="string">120250300000954</field>
            <edit-type type="string">input-number</edit-type>
            <min-width type="number">80</min-width>
          </array-item>
          <array-item type="object">
            <title type="string">类型</title>
            <field type="string">120250300000960</field>
            <edit-type type="string">dictionary</edit-type>
            <min-width type="number">80</min-width>
            <props type="object">
              <code type="string">ENR_CollectionTypeEnum</code>
            </props>
          </array-item>
          <array-item type="object">
            <title type="string">拒测原因</title>
            <field type="string">120250300000958</field>
            <edit-type type="string">input</edit-type>
            <min-width type="number">150</min-width>
          </array-item>
          <array-item type="object">
            <title type="string">降温措施</title>
            <field type="string">120250300000959</field>
            <edit-type type="string">dictionary</edit-type>
            <min-width type="number">100</min-width>
            <props type="object">
              <code type="string">ENR_TMeasureEnum</code>
            </props>
          </array-item>
        </children>
      </array-item>
      <array-item type="object">
        <title type="string">入量</title>
        <field type="string">120250300000953</field>
        <data-type type="string">array</data-type>
        <children type="array">
          <array-item type="object">
            <title type="string">入量名称</title>
            <field type="string">120250300000944</field>
            <edit-type type="string">dy-array</edit-type>
            <min-width type="number">150</min-width>
            <props type="object">
              <type type="string">input</type>
            </props>
          </array-item>
          <array-item type="object">
            <title type="string">ml</title>
            <field type="string">120250300000945</field>
            <edit-type type="string">dy-array</edit-type>
            <min-width type="number">80</min-width>
            <props type="object">
              <type type="string">input</type>
            </props>
          </array-item>
          <array-item type="object">
            <edit-type type="string">dy-operates</edit-type>
            <field type="string">col93</field>
            <data-type type="string">none</data-type>
            <min-width type="number">100</min-width>
            <props type="object">
              <fields type="array">
                <array-item type="string">120250300000944</array-item>
                <array-item type="string">120250300000945</array-item>
              </fields>
            </props>
          </array-item>
        </children>
      </array-item>
      <array-item type="object">
        <title type="string">出量</title>
        <field type="string">120250300000952</field>
        <data-type type="string">array</data-type>
        <children type="array">
          <array-item type="object">
            <title type="string">名称</title>
            <field type="string">120250300000946</field>
            <edit-type type="string">dy-array</edit-type>
            <min-width type="number">150</min-width>
            <props type="object">
              <type type="string">input</type>
            </props>
          </array-item>
          <array-item type="object">
            <title type="string">ml</title>
            <field type="string">120250300000947</field>
            <edit-type type="string">dy-array</edit-type>
            <min-width type="number">80</min-width>
            <props type="object">
              <type type="string">input</type>
            </props>
          </array-item>
          <array-item type="object">
            <title type="string">性状</title>
            <field type="string">120250300000948</field>
            <edit-type type="string">dy-array</edit-type>
            <min-width type="number">80</min-width>
            <props type="object">
              <type type="string">input</type>
            </props>
          </array-item>
          <array-item type="object">
            <edit-type type="string">dy-operates</edit-type>
            <field type="string">col94</field>
            <data-type type="string">none</data-type>
            <min-width type="number">100</min-width>
            <props type="object">
              <fields type="array">
                <array-item type="string">120250300000946</array-item>
                <array-item type="string">120250300000947</array-item>
                <array-item type="string">120250300000948</array-item>
              </fields>
            </props>
          </array-item>
        </children>
      </array-item>
      <array-item type="object">
        <title type="string">病情观察及护理措施</title>
        <field type="string">120250300000949</field>
        <edit-type type="string">input-textArea</edit-type>
        <min-width type="number">200</min-width>
      </array-item>
      <array-item type="object">
        <title type="string">护士签名</title>
        <field type="string">sign</field>
        <edit-type type="string">dy-sign</edit-type>
        <min-width type="number">100</min-width>
      </array-item>
    </columns>
  </config>
  <create-time type="string">2025-03-26 14:33:48</create-time>
  <title type="string"></title>
  <main-title type="string"></main-title>
</application>
`;
const config = reactive(xml2json(xmlStr));
const apis = {
  initData: (data) => {
    return { ...data, collectDatetime: dayjs().format('YYYY-MM-DD HH:mm:ss') };
  },
  query: () => {
    const data = JSON.parse(JSON.stringify(remoteData)).map((item) => {
      delete item.$opType;
      return item;
    });
    console.log('quiery:', data);
    return Promise.resolve({
      isSuccess: true,
      data: data
    });
  },
  edit: (row, editData) => {
    console.log('editData:', row);
    remoteData = remoteData.map((item) =>
      item.id === editData.id ? { id: editData.id, isMerge: false, values: { ...row } } : item
    );
    console.log('removedata:', remoteData);
    return Promise.resolve({
      isSuccess: true,
      msg: '操作成功'
    });
  },
  remove: (row) => {
    remoteData = remoteData.filter((item) => item.id !== row.id);
    return Promise.resolve({
      isSuccess: true,
      msg: '操作成功'
    });
  },
  add: (addItem) => {
    addItem = { ...addItem };
    remoteData = [
      { isMerge: false, id: Math.random().toString().slice(2), values: addItem }
    ].concat(remoteData);
    console.log('addItem:', JSON.stringify(remoteData));
    return Promise.resolve({
      isSuccess: true,
      msg: '操作成功'
    });
  }
};
</script>

<style lang="scss">
.vxe-body--column {
  padding: 0 !important;
  &.col--seq {
    text-align: center !important;
  }
  &.col--last {
    .ant-space-horizontal {
      padding-left: 6px;
    }
  }
  .ant-input-affix-wrapper,
  .ant-input {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .vxe-cell {
    padding: 0 !important;
  }
  .form-table-item {
    padding: 2px !important;
  }
}
</style>
